<template>
  <div class="building-statistics">
    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-select v-model="districtId" placeholder="按片区筛选" clearable style="width: 200px" @change="getHouseList">
        <el-option v-for="area in districtList" :key="area.id" :label="area.districtName" :value="area.id" />
      </el-select>

      <!-- <el-select v-model="housingId" placeholder="按楼宇筛选" clearable style="width: 200px; margin-left: 10px" @change="loadAreaStatistics">
        <el-option v-for="area in buildingList" :key="area.id" :label="area.housingName" :value="area.id" />
      </el-select> -->
    </div>

    <!-- 统计卡片 -->
    <div class="stat-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><OfficeBuilding /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ formatNumber(statistics?.totalArea) }}㎡</div>
          <div class="stat-label">总面积数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><House /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ formatNumber(statistics?.rentedArea) }}㎡</div>
          <div class="stat-label">已租赁面积</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Key /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ formatNumber(statistics?.notRentedArea) }}㎡</div>
          <div class="stat-label">未租赁面积</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ (statistics.occupancyRate * 100).toFixed(1) }}%</div>
          <div class="stat-label">楼宇出租率</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ formatNumber(statistics?.totalEnterprise) }}户</div>
          <div class="stat-label">入驻企业数</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ formatNumber(statistics?.expiringSoonArea) }}㎡</div>
          <div class="stat-label">即将到期面积</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ formatNumber(statistics?.expiringSoonEnterprise) }}户</div>
          <div class="stat-label">即将到期企业数</div>
        </div>
      </div>
    </div>

    <!-- 楼宇详细统计表格 -->
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span>楼宇详细统计</span>
        </div>
      </template>

      <el-table :data="filteredBuildingData" border style="width: 100%" :max-height="tableHeight" v-loading="loading">
        <el-table-column prop="housingName" label="楼宇名称" fixed width="200" />
        <el-table-column prop="districtName" label="所属片区" width="120" />
        <el-table-column prop="totalArea" label="总面积(㎡)" width="120" align="right">
          <template #default="scope">
            {{ formatNumber(scope.row.totalArea) }}
          </template>
        </el-table-column>
        <el-table-column prop="rentedArea" label="已租赁面积(㎡)" width="130" align="right">
          <template #default="scope">
            {{ formatNumber(scope.row.rentedArea) }}
          </template>
        </el-table-column>
        <el-table-column prop="notRentedArea" label="未租赁面积(㎡)" width="130" align="right">
          <template #default="scope">
            {{ formatNumber(scope.row.availableArea || scope.row.totalArea - scope.row.rentedArea) }}
          </template>
        </el-table-column>
        <el-table-column prop="occupancyRate" label="出租率" width="120" align="center"> </el-table-column>
        <el-table-column prop="totalEnterprise" label="入驻企业数" width="110" align="center" />
        <el-table-column prop="expiringSoonArea" label="即将到期面积(㎡)" width="140" align="right">
          <template #default="scope">
            <span :class="{ 'text-warning': scope.row.expiringArea > 0 }">
              {{ formatNumber(scope.row.expiringSoonArea) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="expiringCount" label="即将到期企业数" width="140" align="center">
          <template #default="scope">
            <span :class="{ 'text-warning': scope.row.expiringCount > 0 }">
              {{ scope.row.expiringCount }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getBuildingStatistics } from '@/api/tool/gen';
import { OfficeBuilding, House, Key, Warning } from '@element-plus/icons-vue';

import { overallStatistics, getBuildingList, listDistrict, districtStatistics, housingStatistics, housingList } from '@/api/system/building';

const loading = ref(false);
const buildingData = ref([]);
const selectedArea = ref('');

// 片区选项
const areaOptions = [
  { value: 'A区', label: 'A区' },
  { value: 'C区', label: 'C区' }
];

// 表格高度计算
const tableHeight = computed(() => {
  return document.documentElement.scrollHeight - 400;
});

// 筛选后的楼宇数据
const filteredBuildingData = ref([]);

// 格式化数字
const formatNumber = (value: number) => {
  if (!value && value !== 0) return '0';
  return value.toLocaleString();
};

// 获取出租率颜色
const getRentalRateColor = (rate: number) => {
  if (rate >= 90) return '#67c23a';
  if (rate >= 70) return '#e6a23c';
  return '#f56c6c';
};

// 加载楼宇统计数据
const loadBuildingStatistics = async () => {
  loading.value = true;
};

onMounted(() => {
  getDistrictList();
  loadStatistics();
  getHouseList();
});

const loadStatistics = async () => {
  loading.value = true;

  try {
    const response = await housingStatistics({ districtId: districtId.value, housingId: housingId.value });
    if (response.code === 200) {
      // statistics.value = { ...statistics.value, ...response.data };
      statistics.value = response.data;
    }
  } catch (error) {}
};

const getHousingList = async () => {
  loading.value = true;

  try {
    const response = await housingList({ districtId: districtId.value, housingId: housingId.value });
    if (response.code === 200) {
      // statistics.value = { ...statistics.value, ...response.data };
      statistics.value = response.data;
    }
  } catch (error) {}
};

const statistics = ref({});
const housingId = ref('');
const buildingList = ref([]);
const districtId = ref('');
const districtList = ref([]);
/** 查询楼宇列表 */
const getHouseList = async () => {
  loading.value = true;
  housingId.value = '';
  try {
    loadStatistics();

    const res = await housingList({ districtId: districtId.value, pageNum: 1, pageSize: 100 });
    filteredBuildingData.value = res.rows;
  } finally {
    loading.value = false;
  }
};
// 加载片区列表
const getDistrictList = async () => {
  try {
    const res = await listDistrict({ pageNum: 1, pageSize: 100 });
    districtList.value = res.rows;
  } catch (error) {
    console.error('获取片区列表失败:', error);
  }
};
</script>

<style scoped>
.building-statistics {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 40px;
  margin-right: 15px;
  color: #409eff;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
}

.table-card {
  margin-top: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}

.text-warning {
  color: #e6a23c;
  font-weight: bold;
}

@media (max-width: 768px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }

  .stat-card {
    flex-direction: column;
    text-align: center;
  }

  .stat-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>
